<!DOCTYPE html>

<html>
<head>
  <title>Backbone React Component</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <h1 id="backbone-react-component">Backbone React Component</h1>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <pre><code>Backbone.React.Component v0<span class="hljs-number">.10</span><span class="hljs-number">.0</span>

(c) <span class="hljs-number">2014</span>, <span class="hljs-number">2015</span> <span class="hljs-string">"Magalhas"</span> José Magalhães &lt;magalhas@gmail.com&gt;
Backbone.React.Component can be freely distributed under the MIT license.
</code></pre><p><code>Backbone.React.Component</code> is a mixin that glues <a href="http://backbonejs.org/">Backbone</a>
models and collections into <a href="http://facebook.github.io/react/">React</a> components.</p>
<p>When the component is mounted, a wrapper starts listening to models and
collections changes to automatically set your component state and achieve UI
binding through reactive updates.</p>
<p>Basic Usage</p>
<pre><code><span class="hljs-keyword">var</span> MyComponent = React.createClass({
  <span class="hljs-attr">mixins</span>: [Backbone.React.Component.mixin],
  <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>{this.state.model.foo}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
  }
});
<span class="hljs-keyword">var</span> model = <span class="hljs-keyword">new</span> Backbone.Model({<span class="hljs-attr">foo</span>: <span class="hljs-string">'bar'</span>});
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">MyComponent</span> <span class="hljs-attr">model</span>=<span class="hljs-string">{model}</span> /&gt;</span>, document.body);</span>
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>
(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">root, factory</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Universal module definition</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> define === <span class="hljs-string">'function'</span> &amp;&amp; define.amd) {
    define([<span class="hljs-string">'react'</span>, <span class="hljs-string">'react-dom'</span>, <span class="hljs-string">'backbone'</span>, <span class="hljs-string">'underscore'</span>], factory);
  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">module</span> !== <span class="hljs-string">'undefined'</span> &amp;&amp; <span class="hljs-built_in">module</span>.exports) {
    <span class="hljs-built_in">module</span>.exports = factory(<span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>), <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>), <span class="hljs-built_in">require</span>(<span class="hljs-string">'backbone'</span>), <span class="hljs-built_in">require</span>(<span class="hljs-string">'underscore'</span>));
  } <span class="hljs-keyword">else</span> {
    factory(root.React, root.ReactDOM, root.Backbone, root._);
  }
}(<span class="hljs-keyword">this</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">React, ReactDOM, Backbone, _</span>) </span>{
<span class="hljs-meta">  'use strict'</span>;
  <span class="hljs-keyword">if</span> (!Backbone.React) {
    Backbone.React = {};
  }
  <span class="hljs-keyword">if</span> (!Backbone.React.Component) {
    Backbone.React.Component = {};
  }</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Mixin used in all component instances. Exported through <code>Backbone.React.Component.mixin</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-keyword">var</span> mixin = Backbone.React.Component.mixin = {</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Types of the context passed to child components. Only
<code>hasParentBackboneMixin</code> is required all of the others are optional.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    childContextTypes: {
      <span class="hljs-attr">hasParentBackboneMixin</span>: React.PropTypes.bool.isRequired,
      <span class="hljs-attr">parentModel</span>: React.PropTypes.any,
      <span class="hljs-attr">parentCollection</span>: React.PropTypes.any
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Types of the context received from the parent component. All of them are
optional.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    contextTypes: {
      <span class="hljs-attr">hasParentBackboneMixin</span>: React.PropTypes.bool,
      <span class="hljs-attr">parentModel</span>: React.PropTypes.any,
      <span class="hljs-attr">parentCollection</span>: React.PropTypes.any
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Passes data to our child components.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    getChildContext: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">hasParentBackboneMixin</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">parentModel</span>: <span class="hljs-keyword">this</span>.getModel(),
        <span class="hljs-attr">parentCollection</span>: <span class="hljs-keyword">this</span>.getCollection()
      };
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Sets <code>this.el</code> and <code>this.$el</code> when the component mounts.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    componentDidMount: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">this</span>.setElement(ReactDOM.findDOMNode(<span class="hljs-keyword">this</span>));
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Sets <code>this.el</code> and <code>this.$el</code> when the component updates.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    componentDidUpdate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">this</span>.setElement(ReactDOM.findDOMNode(<span class="hljs-keyword">this</span>));
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>When the component gets the initial state, instance a <code>Wrapper</code> to take
care of models and collections binding with <code>this.state</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">var</span> initialState = {};

      <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.wrapper) {
        <span class="hljs-keyword">this</span>.wrapper = <span class="hljs-keyword">new</span> Wrapper(<span class="hljs-keyword">this</span>, initialState);
      }

      <span class="hljs-keyword">return</span> initialState;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>When the component mounts, instance a <code>Wrapper</code> to take care
of models and collections binding with <code>this.state</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    componentWillMount: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.wrapper) {
        <span class="hljs-keyword">this</span>.wrapper = <span class="hljs-keyword">new</span> Wrapper(<span class="hljs-keyword">this</span>);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>When the component unmounts, dispose listeners and delete
<code>this.wrapper</code> reference.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    componentWillUnmount: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.wrapper) {
        <span class="hljs-keyword">this</span>.wrapper.stopListening();
        <span class="hljs-keyword">delete</span> <span class="hljs-keyword">this</span>.wrapper;
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>In order to allow passing nested models and collections as reference we
filter <code>nextProps.model</code> and <code>nextProps.collection</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    componentWillReceiveProps: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">nextProps</span>) </span>{
      <span class="hljs-keyword">var</span> model = nextProps.model;
      <span class="hljs-keyword">var</span> collection = nextProps.collection;

      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.wrapper.model &amp;&amp; model) {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.wrapper.model !== model) {
          <span class="hljs-keyword">this</span>.wrapper.stopListening();
          <span class="hljs-keyword">this</span>.wrapper = <span class="hljs-keyword">new</span> Wrapper(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, nextProps);
        }
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (model) {
        <span class="hljs-keyword">this</span>.wrapper = <span class="hljs-keyword">new</span> Wrapper(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, nextProps);
      }

      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.wrapper.collection &amp;&amp; collection) {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.wrapper.collection !== collection) {
          <span class="hljs-keyword">this</span>.wrapper.stopListening();
          <span class="hljs-keyword">this</span>.wrapper = <span class="hljs-keyword">new</span> Wrapper(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, nextProps);
        }
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (collection) {
        <span class="hljs-keyword">this</span>.wrapper = <span class="hljs-keyword">new</span> Wrapper(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, nextProps);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>Shortcut to <code>@$el.find</code> if jQuery ins present, else if fallbacks to DOM
native <code>querySelector</code>. Inspired by <code>Backbone.View</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    $: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">var</span> els;

      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.$el) {
        els = <span class="hljs-keyword">this</span>.$el.find.apply(<span class="hljs-keyword">this</span>.$el, <span class="hljs-built_in">arguments</span>);
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">var</span> el = ReactDOM.findDOMNode(<span class="hljs-keyword">this</span>);
        els = el.querySelector.apply(el, <span class="hljs-built_in">arguments</span>);
      }

      <span class="hljs-keyword">return</span> els;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>Grabs the collection from <code>@wrapper.collection</code> or <code>@context.parentCollection</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    getCollection: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.wrapper.collection || <span class="hljs-keyword">this</span>.context.parentCollection;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Grabs the model from <code>@wrapper.model</code> or <code>@context.parentModel</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    getModel: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.wrapper.model || <span class="hljs-keyword">this</span>.context.parentModel;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>Sets a DOM element to render/mount this component on this.el and this.$el.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setElement: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">el</span>) </span>{
      <span class="hljs-keyword">if</span> (el &amp;&amp; Backbone.$ &amp;&amp; el <span class="hljs-keyword">instanceof</span> Backbone.$) {
        <span class="hljs-keyword">if</span> (el.length &gt; <span class="hljs-number">1</span>) {
          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'You can only assign one element to a component'</span>);
        }
        <span class="hljs-keyword">this</span>.el = el[<span class="hljs-number">0</span>];
        <span class="hljs-keyword">this</span>.$el = el;
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (el) {
        <span class="hljs-keyword">this</span>.el = el;
        <span class="hljs-keyword">if</span> (Backbone.$) {
          <span class="hljs-keyword">this</span>.$el = Backbone.$(el);
        }
      }
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
    }
  };</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p>Binds models and collections to a <code>React.Component</code>. It mixes <code>Backbone.Events</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Wrapper</span> (<span class="hljs-params">component, initialState, nextProps</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>Object to store wrapper state (not the component state)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">this</span>.state = {};</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>1:1 relation with the <code>component</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">this</span>.component = component;</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p>Use <code>nextProps</code> or <code>component.props</code> and grab <code>model</code> and <code>collection</code>
from there</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">var</span> props = nextProps || component.props || {};
    <span class="hljs-keyword">var</span> model, collection;

    <span class="hljs-keyword">if</span> (component.overrideModel &amp;&amp; <span class="hljs-keyword">typeof</span> component.overrideModel === <span class="hljs-string">'function'</span>){</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p>Define overrideModel() method on your <code>React class</code> to programatically supply a model object
Will override <code>this.props.model</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      model = component.overrideModel();
    } <span class="hljs-keyword">else</span> {
      model = props.model;
    }

    <span class="hljs-keyword">if</span> (component.overrideCollection &amp;&amp; <span class="hljs-keyword">typeof</span> component.overrideCollection === <span class="hljs-string">'function'</span>){</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>Define overrideCollection() method on your <code>React class</code> to programatically supply a collection object
Will override <code>this.props.collection</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      collection = component.overrideCollection();
    } <span class="hljs-keyword">else</span> {
      collection = props.collection;
    }

    <span class="hljs-keyword">this</span>.setModels(model, initialState);
    <span class="hljs-keyword">this</span>.setCollections(collection, initialState);
  }</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p>Mixing <code>Backbone.Events</code> into <code>Wrapper.prototype</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  _.extend(Wrapper.prototype, Backbone.Events, {</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p>Sets <code>this.state</code> when a model/collection request results in error. It delegates
to <code>this.setState</code>. It listens to <code>Backbone.Model#error</code> and <code>Backbone.Collection#error</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    onError: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modelOrCollection, res, options</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p>Set state only if there’s no silent option</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">if</span> (!options.silent) {
        <span class="hljs-keyword">this</span>.component.setState({
          <span class="hljs-attr">isRequesting</span>: <span class="hljs-literal">false</span>,
          <span class="hljs-attr">hasError</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">error</span>: res
        });
      }
    },
    <span class="hljs-attr">onInvalid</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">model, res, options</span>) </span>{
      <span class="hljs-keyword">if</span> (!options.silent) {
        <span class="hljs-keyword">this</span>.component.setState({
          <span class="hljs-attr">isInvalid</span>: <span class="hljs-literal">true</span>
        });
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>Sets <code>this.state</code> when a model/collection request starts. It delegates to
<code>this.setState</code>. It listens to <code>Backbone.Model#request</code> and
<code>Backbone.Collection#request</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    onRequest: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modelOrCollection, xhr, options</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p>Set <code>state</code> only if there’s no silent option</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">if</span> (!options.silent) {
        <span class="hljs-keyword">this</span>.component.setState({
          <span class="hljs-attr">isRequesting</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">hasError</span>: <span class="hljs-literal">false</span>,
          <span class="hljs-attr">isInvalid</span>: <span class="hljs-literal">false</span>
        });
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p>Sets <code>this.state</code> when a model/collection syncs. It delegates to <code>this.setState</code>.
It listens to <code>Backbone.Model#sync</code> and <code>Backbone.Collection#sync</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    onSync: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modelOrCollection, res, options</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <p>Calls <code>setState</code> only if there’s no silent option</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">if</span> (!options.silent) {
        <span class="hljs-keyword">this</span>.component.setState({<span class="hljs-attr">isRequesting</span>: <span class="hljs-literal">false</span>});
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              <p>Check if <code>models</code> is a <code>Backbone.Model</code> or an hashmap of them, sets them
to the component state and binds to update on any future changes</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setModels: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">models, initialState, isDeferred</span>) </span>{
      <span class="hljs-keyword">var</span> isValid = <span class="hljs-keyword">typeof</span> models !== <span class="hljs-string">'undefined'</span>;

      <span class="hljs-keyword">if</span> (isValid) {
        <span class="hljs-keyword">if</span> (!models.attributes) {
          <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> models === <span class="hljs-string">'object'</span>) {
            <span class="hljs-keyword">var</span> _values = _.values(models);
            isValid = _values.length &gt; <span class="hljs-number">0</span> &amp;&amp; _values[<span class="hljs-number">0</span>].attributes;
          } <span class="hljs-keyword">else</span> {
            isValid = <span class="hljs-literal">false</span>;
          }
        }
      }

      <span class="hljs-keyword">if</span> (isValid) {
        <span class="hljs-keyword">this</span>.model = models;</pre></div></div>
            
        </li>
        
        
        <li id="section-32">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-32">&#182;</a>
              </div>
              <p>Set model(s) attributes on <code>initialState</code> for the first render</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.setStateBackbone(models, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, initialState, isDeferred);
        <span class="hljs-keyword">this</span>.startModelListeners(models);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-33">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-33">&#182;</a>
              </div>
              <p>Check if <code>collections</code> is a <code>Backbone.Model</code> or an hashmap of them,
sets them to the component state and binds to update on any future changes</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setCollections: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">collections, initialState, isDeferred</span>) </span>{
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> collections !== <span class="hljs-string">'undefined'</span> &amp;&amp; (collections.models ||
          <span class="hljs-keyword">typeof</span> collections === <span class="hljs-string">'object'</span> &amp;&amp; _.values(collections)[<span class="hljs-number">0</span>].models)) {</pre></div></div>
            
        </li>
        
        
        <li id="section-34">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-34">&#182;</a>
              </div>
              <p>The collection(s) bound to this component</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.collection = collections;</pre></div></div>
            
        </li>
        
        
        <li id="section-35">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-35">&#182;</a>
              </div>
              <p>Set collection(s) models on <code>initialState</code> for the first render</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.setStateBackbone(collections, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, initialState, isDeferred);
        <span class="hljs-keyword">this</span>.startCollectionListeners(collections);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-36">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-36">&#182;</a>
              </div>
              <p>Used internally to set <code>this.collection</code> or <code>this.model</code> on <code>this.state</code>. Delegates to
<code>this.setState</code>. It listens to <code>Backbone.Collection</code> events such as <code>update</code>,
<code>change</code>, <code>sort</code>, <code>reset</code> and to <code>Backbone.Model</code> <code>change</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setStateBackbone: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modelOrCollection, key, target, isDeferred</span>) </span>{
      <span class="hljs-keyword">if</span> (!(modelOrCollection.models || modelOrCollection.attributes)) {
        <span class="hljs-keyword">for</span> (key <span class="hljs-keyword">in</span> modelOrCollection)
            <span class="hljs-keyword">this</span>.setStateBackbone(modelOrCollection[key], key, target);
        <span class="hljs-keyword">return</span>;
      }
      <span class="hljs-keyword">this</span>.setState.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-37">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-37">&#182;</a>
              </div>
              <p>Get the attributes for the collection or model as array or hash</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    getAttributes: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modelOrCollection</span>)</span>{
      <span class="hljs-keyword">var</span> attrs = [];</pre></div></div>
            
        </li>
        
        
        <li id="section-38">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-38">&#182;</a>
              </div>
              <p>if a collection, get the attributes of each, otherwise return modelOrCollection</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">if</span> (modelOrCollection <span class="hljs-keyword">instanceof</span> Backbone.Collection) {
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; modelOrCollection.models.length; i++) {
          attrs.push(_.clone(modelOrCollection.models[i].attributes));
        }
        <span class="hljs-keyword">return</span> attrs;
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">return</span> _.clone(modelOrCollection.attributes);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-39">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-39">&#182;</a>
              </div>
              <p>Sets a model, collection or object into state by delegating to <code>this.component.setState</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setState: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modelOrCollection, key, target, isDeferred</span>) </span>{
      <span class="hljs-keyword">var</span> state = {};
      <span class="hljs-keyword">var</span> newState = <span class="hljs-keyword">this</span>.getAttributes(modelOrCollection);

      <span class="hljs-keyword">if</span> (key) {
        state[key] = newState;
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (modelOrCollection.models) {
        state.collection = newState;
      } <span class="hljs-keyword">else</span> {
        state.model = newState;
      }

      <span class="hljs-keyword">if</span> (target) {
        _.extend(target, state);
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (isDeferred) {
        <span class="hljs-keyword">this</span>.nextState = _.extend(<span class="hljs-keyword">this</span>.nextState || {}, state);
        _.defer(_.bind(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
          <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.nextState) {
            <span class="hljs-keyword">this</span>.component.setState(<span class="hljs-keyword">this</span>.nextState);
            <span class="hljs-keyword">this</span>.nextState = <span class="hljs-literal">null</span>;
          }
        }, <span class="hljs-keyword">this</span>));
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">this</span>.component.setState(state);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-40">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-40">&#182;</a>
              </div>
              <p>Binds the component to any collection changes.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    startCollectionListeners: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">collection, key</span>) </span>{
      <span class="hljs-keyword">if</span> (!collection) collection = <span class="hljs-keyword">this</span>.collection;
      <span class="hljs-keyword">if</span> (collection) {
        <span class="hljs-keyword">if</span> (collection.models)
          <span class="hljs-keyword">this</span>
            .listenTo(collection, <span class="hljs-string">'update change sort reset'</span>,
              _.partial(<span class="hljs-keyword">this</span>.setStateBackbone, collection, key, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, <span class="hljs-literal">true</span>))
            .listenTo(collection, <span class="hljs-string">'error'</span>, <span class="hljs-keyword">this</span>.onError)
            .listenTo(collection, <span class="hljs-string">'request'</span>, <span class="hljs-keyword">this</span>.onRequest)
            .listenTo(collection, <span class="hljs-string">'sync'</span>, <span class="hljs-keyword">this</span>.onSync);
        <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> collection === <span class="hljs-string">'object'</span>)
          <span class="hljs-keyword">for</span> (key <span class="hljs-keyword">in</span> collection)
            <span class="hljs-keyword">if</span> (collection.hasOwnProperty(key))
              <span class="hljs-keyword">this</span>.startCollectionListeners(collection[key], key);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-41">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-41">&#182;</a>
              </div>
              <p>Binds the component to any model changes.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    startModelListeners: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">model, key</span>) </span>{
      <span class="hljs-keyword">if</span> (!model) model = <span class="hljs-keyword">this</span>.model;
      <span class="hljs-keyword">if</span> (model) {
        <span class="hljs-keyword">if</span> (model.attributes)
          <span class="hljs-keyword">this</span>
            .listenTo(model, <span class="hljs-string">'change'</span>,
              _.partial(<span class="hljs-keyword">this</span>.setStateBackbone, model, key, <span class="hljs-keyword">void</span> <span class="hljs-number">0</span>, <span class="hljs-literal">true</span>))
            .listenTo(model, <span class="hljs-string">'error'</span>, <span class="hljs-keyword">this</span>.onError)
            .listenTo(model, <span class="hljs-string">'request'</span>, <span class="hljs-keyword">this</span>.onRequest)
            .listenTo(model, <span class="hljs-string">'sync'</span>, <span class="hljs-keyword">this</span>.onSync)
            .listenTo(model, <span class="hljs-string">'invalid'</span>, <span class="hljs-keyword">this</span>.onInvalid);
        <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> model === <span class="hljs-string">'object'</span>)
          <span class="hljs-keyword">for</span> (key <span class="hljs-keyword">in</span> model)
            <span class="hljs-keyword">this</span>.startModelListeners(model[key], key);
      }
    }
  });</pre></div></div>
            
        </li>
        
        
        <li id="section-42">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-42">&#182;</a>
              </div>
              <p>Facade method to bypass the <code>mixin</code> usage. For use cases such as ES6
classes or else. It binds any <code>Backbone.Model</code> and <code>Backbone.Collection</code>
instance found inside <code>backboneInstances.models</code> and
<code>backboneInstances.collections</code> (single instances or objects of them)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  mixin.on = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">component, backboneInstances</span>) </span>{
    <span class="hljs-keyword">var</span> wrapper;

    <span class="hljs-keyword">if</span> (!component.wrapper) {
      wrapper = <span class="hljs-keyword">new</span> Wrapper(component);
    } <span class="hljs-keyword">else</span> {
      wrapper = component.wrapper;
    }

    <span class="hljs-keyword">if</span> (backboneInstances.models) {
      wrapper.setModels(backboneInstances.models);
    }
    <span class="hljs-keyword">if</span> (backboneInstances.collections) {
      wrapper.setCollections(backboneInstances.collections);
    }
    component.wrapper = wrapper;
  };</pre></div></div>
            
        </li>
        
        
        <li id="section-43">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-43">&#182;</a>
              </div>
              <p>Shortcut method to bind a model or multiple models</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  mixin.onModel = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">component, models</span>) </span>{
    mixin.on(component, {<span class="hljs-attr">models</span>: models});
  };</pre></div></div>
            
        </li>
        
        
        <li id="section-44">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-44">&#182;</a>
              </div>
              <p>Shortcut method to bind a collection or multiple collections</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  mixin.onCollection = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">component, collections</span>) </span>{
    mixin.on(component, {<span class="hljs-attr">collections</span>: collections});
  };</pre></div></div>
            
        </li>
        
        
        <li id="section-45">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-45">&#182;</a>
              </div>
              <p>Facade method to dispose of a <code>component.wrapper</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  mixin.off = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">component, modelOrCollection</span>) </span>{
    <span class="hljs-keyword">if</span> (<span class="hljs-built_in">arguments</span>.length === <span class="hljs-number">2</span>) {
      <span class="hljs-keyword">if</span> (component.wrapper) {
        component.wrapper.stopListening(modelOrCollection);</pre></div></div>
            
        </li>
        
        
        <li id="section-46">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-46">&#182;</a>
              </div>
              <p>TODO Remove modelOrCollection from <code>component.state</code>?</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      }
    } <span class="hljs-keyword">else</span> {
      mixin.componentWillUnmount.call(component);
    }
  };</pre></div></div>
            
        </li>
        
        
        <li id="section-47">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-47">&#182;</a>
              </div>
              <p>Expose <code>Backbone.React.Component.mixin</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-keyword">return</span> mixin;
}));</pre></div></div>
            
        </li>
        
        
        <li id="section-48">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-48">&#182;</a>
              </div>
              <p><a href="https://github.com/magalhas/backbone-react-component"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a></p>

            </div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
